<div *ngIf="stateService.env.MINING_DASHBOARD || stateService.env.LIGHTNING || stateService.env.ACCELERATOR" class="mb-3 d-flex menu" [style]="{'flex-wrap': flexWrap ? 'wrap' : ''}">

  <a routerLinkActive="active" class="btn btn-primary w-33"
    [routerLink]="['/graphs/mempool' | relativeUrl]">Mempool</a>

  <div ngbDropdown class="w-33" *ngIf="stateService.env.MINING_DASHBOARD">
    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="mining">Mining</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools' | relativeUrl]"
        i18n="mining.pools">Pools Ranking</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/pools-dominance' | relativeUrl]"
        i18n="mining.pools-dominance">Pools Dominance</a>
      <a class="dropdown-item" routerLinkActive="active"
        [routerLink]="['/graphs/mining/hashrate-difficulty' | relativeUrl]" i18n="mining.hashrate-difficulty">Hashrate & Difficulty</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-fee-rates' | relativeUrl]"
        i18n="mining.block-fee-rates">Block Fee Rates</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-fees' | relativeUrl]"
        i18n="mining.block-fees">Block Fees</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-fees-subsidy' | relativeUrl]"
        i18n="mining.block-fees-subsidy-subsidy">Block Fees Vs Subsidy</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/mining/block-rewards' | relativeUrl]"
        i18n="mining.block-rewards">Block Rewards</a>
      <a class="dropdown-item" routerLinkActive="active"
        [routerLink]="['/graphs/mining/block-sizes-weights' | relativeUrl]" i18n="mining.block-sizes-weights">Block Sizes and Weights</a>
      <a *ngIf="stateService.env.AUDIT" class="dropdown-item" routerLinkActive="active"
        [routerLink]="['/graphs/mining/block-health' | relativeUrl]" i18n="mining.blocks-health">Block Health</a>
    </div>
  </div>

  <div ngbDropdown class="w-33" *ngIf="stateService.networkSupportsLightning()">
    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="lightning">Lightning</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-networks' | relativeUrl]"
        i18n="lightning.nodes-networks">Lightning Nodes Per Network</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/capacity' | relativeUrl]"
        i18n="lightning.network-capacity">Lightning Network Capacity</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-isp' | relativeUrl]"
        i18n="lightning.nodes-per-isp">Lightning Nodes Per ISP</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-per-country' | relativeUrl]"
        i18n="lightning.nodes-per-country">Lightning Nodes Per Country</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-map' | relativeUrl]"
        i18n="lightning.lightning.nodes-heatmap">Lightning Nodes World Map</a>
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/lightning/nodes-channels-map' | relativeUrl]"
        i18n="lightning.nodes-channels-world-map">Lightning Nodes Channels World Map</a>
    </div>
  </div>

  <div ngbDropdown class="w-33" *ngIf="stateService.env.ACCELERATOR && isMainnet">
    <button class="btn btn-primary w-100" id="dropdownBasic1" ngbDropdownToggle i18n="accelerator.accelerations">Accelerations</button>
    <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
      <a class="dropdown-item" routerLinkActive="active" [routerLink]="['/graphs/acceleration/fees' | relativeUrl]"
        i18n="accelerator.acceleration-fees">Acceleration Fees</a>
    </div>
  </div>
</div>

<router-outlet></router-outlet>
